@import (reference) '../../common/variables.less';

.benefits {
  background: linear-gradient(to bottom, fadeout(@white-bg, 0%) 0, fadeout(@white-bg, 100%) 100px), @light-blue-bg;

  &-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    padding-top: 100px;
    padding-bottom: 30px;

    @media @md-xl {
      padding-bottom: 100px;
    }
  }

  &-item {
    width: 100%;
    margin-bottom: 2rem;
    text-align: center;

    @media @sm-xl {
      width: 42%;
      margin: 2rem 2rem 2rem 0;
      text-align: start;
    }

    @media @md-xl {
      width: 26%;
    }

    > svg {
      width: 40px;
      height: 40px;
      fill: @landing-blue;
      stroke: @landing-blue;
    }
  }

  &-title {
    margin: 1rem 0;
  }

  &-description {
    font-size: 1rem;
  }
}
